<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${constants.getSystemName()}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-xs12">
            <div class="layui-card" style="">
                <div class="layui-inline"><label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="startMonth" placeholder="yyyy-MM">
                    </div>
                </div>
                <div class="layui-inline"><label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="endMonth" placeholder="yyyy-MM">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="search">查询</button>
                </div>
            </div>
            <div class="layui-card" style="">
                <div class="layui-card-header">月账单图表显示</div>
                <div class="layui-card-body" style="height: 320px;overflow: hidden;">
                    <div id="hdqkyc" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>

<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>

<script>
    layui.use(['layer', 'element', 'HttpRequest', 'laydate'], function () {

        var $ = layui.jquery;
        var HttpRequest = layui.HttpRequest;
        var laydate = layui.laydate;

        //年月选择器
        laydate.render({
            elem: '#startMonth'
            , type: 'month'
        });

        //年月选择器
        laydate.render({
            elem: '#endMonth'
            , type: 'month'
        });

        // 渲染活动情况预测
        var myCharts = echarts.init(document.getElementById('hdqkyc'), myEchartsTheme);
        var userId = Feng.getUrlParam("id");
        var xData = [];
        var wxExpenditureData = [];
        var wxIncomeData = [];
        var alpayExpendituredata = [];
        var alpayIncomeData = [];

        $('#search').on("click", function () {
            showUserPayBills();
        });


        showUserPayBills();

        function showUserPayBills() {
            var startMonth = $("#startMonth").val();
            var endMonth = $("#endMonth").val();

            var request = new HttpRequest(Feng.ctxPath + "/userPayBillsDetail/findUserPayBillsToMonth?userId=" + userId + "&startMonth=" + startMonth + "&endMonth=" + endMonth, 'post', function (data) {
                var data = data.data;
                xData = [];
                wxExpenditureData = [];
                wxIncomeData = [];
                alpayExpendituredata = [];
                alpayIncomeData = [];
                for (var i = 0; i < data.length; i++) {
                    var pay = data[i];
                    if (!(xData.indexOf(pay.date) > -1)) {
                        xData.push(pay.date);
                    }
                }

                for (var i = 0; i < xData.length; i++) {
                    var date = xData[i];
                    a:
                        for (var x = 0; x < data.length; x++) {
                            var pay = data[x];
                            if (pay.date == date) {
                                if (pay.payBillsType == 0) {
                                    wxExpenditureData.push(pay.expenditure);
                                    wxIncomeData.push(pay.income);
                                    break a;
                                }
                            }

                            if (x == data.length - 1) {
                                wxExpenditureData.push(0);
                                wxIncomeData.push(0);
                            }
                        }

                    b:
                        for (var x = 0; x < data.length; x++) {
                            var pay = data[x];
                            if (pay.date == date) {
                                if (pay.payBillsType == 1) {
                                    alpayExpendituredata.push(pay.expenditure);
                                    alpayIncomeData.push(pay.income);
                                    break b;
                                }
                            }

                            if (x == data.length - 1) {
                                alpayExpendituredata.push(0);
                                alpayIncomeData.push(0);
                            }
                        }

                }

            }, function (data) {
                Feng.error("获取数据失败!" + data.message);
            });

            request.start(true);

            var option = {
                title: {
                    text: '',
                    subtext: '',
                    textStyle: {
                        color: '#000'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ['微信支出', '微信收入', '支付宝支出', '支付宝收入']
                },
                xAxis: [{
                    type: "category",
                    data: xData
                }],
                yAxis: [{
                    type: "value"
                }],
                series: [{
                    name: '微信支出',
                    type: 'bar',
                    data: wxExpenditureData
                }, {
                    name: '微信收入',
                    type: 'bar',
                    data: wxIncomeData
                }, {
                    name: '支付宝支出',
                    type: 'bar',
                    data: alpayExpendituredata
                }, {
                    name: '支付宝收入',
                    type: 'bar',
                    data: alpayIncomeData
                }]

            };
            myCharts.setOption(option);
        }


        // 窗口大小改变事件
        window.onresize = function () {
            myCharts.resize();
        };
    });
</script>
</body>

</html>